<template>
  <el-form :model="form" label-width="auto" ref="formRef" style="max-width: 100%">
    <el-row :gutter="80">
      <template v-for="item in _list" :key="item">
        <el-col :span="8" v-if="item.isShow === 'true' || !item.isShow">
          <el-form-item
            :label="item?.label"
            :label-width="item?.labelWidth ? item?.labelWidth : 85"
            :prop="item?.type === 'select-input' ? item.model.split('-')[1] : item.model"
            :rules="item.required ? { required: true, message: '请输入', trigger: ['blur'] } : []"
          >
            <!-- 输入框 -->
            <el-input
              v-if="item?.type === 'input'"
              v-model="form[item.model]"
              :placeholder="item['placeholder'] ? item['placeholder'] : '请输入'"
            />
            <!-- 下拉选择框 -->
            <el-select
              v-else-if="item?.type === 'select'"
              clearable
              v-model="form[item.model]"
              :placeholder="item['placeholder'] ? item['placeholder'] : '请选择'"
              style="width: 100%"
              :disabled="item.disabled"
            >
              <el-option
                v-for="_item in item?.data"
                :key="_item.value"
                :label="item.props ? _item[item.props.label] : _item.label"
                :value="item.props ? _item[item.props.value] : _item.value"
                :disabled="_item.disabled"
              />
            </el-select>
            <!-- 树型下拉 -->
            <el-tree-select
              v-else-if="item?.type === 'select-tree'"
              clearable
              v-model="form[item.model]"
              :node-key="item.nodeKey"
              check-strictly
              default-expand-all
              :data="item.data"
              :render-after-expand="false"
              :props="{
                label: 'name'
              }"
              style="width: 100%"
            />
            <!-- @node-click="handleNodeClick" -->
            <!-- 日期范围选择 -->
            <el-date-picker
              v-else-if="item?.type === 'daterange'"
              clearable
              v-model="form[item.model]"
              type="daterange"
              range-separator=" - "
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD  HH:mm:ss"
              :placeholder="item['placeholder'] ? item['placeholder'] : '请选择'"
              @change="daterangeChange"
            />
            <!-- 单个日期选择 -->
            <el-date-picker
              v-else-if="item?.type === 'date'"
              clearable
              v-model="form[item.model]"
              type="date"
              :placeholder="item['placeholder'] ? item['placeholder'] : '请选择'"
              style="width: 100%"
            />
            <!-- 价格范围选择 -->
            <div v-else-if="item?.type === 'numrange'" class="numrange">
              <el-input :min="0" type="number" v-model="form[item.model.split('-')[0]]" />
              <span> - </span>
              <el-input :min="0" type="number" v-model="form[item.model.split('-')[1]]" />
            </div>

            <!-- 下拉级联选择 -->
            <el-cascader
              v-else-if="item?.type === 'cascader'"
              v-model="form[item.model]"
              :options="item.data || []"
              :props="item.props"
              clearable
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="1"
              style="width: 100%"
            />

            <!-- 省市区级联选择 -->
            <el-cascader
              v-else-if="item?.type === 'city-select'"
              v-model="form[item.model]"
              :options="area"
              :props="item.props"
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="1"
              style="width: 100%"
            />

            <!-- 输入框嵌入下拉选择 -->
            <el-input
              class="jzt-select-input"
              v-else-if="item?.type === 'select-input'"
              v-model="form[item.model.split('-')[1]]"
              style="max-width: 600px"
              :placeholder="item.placeholder || '请输入'"
              :disabled="!(form[item.model.split('-')[0]] || form[item.model.split('-')[0]] == 0)"
            >
              <template #prepend>
                <el-select v-model="form[item.model.split('-')[0]]" :placeholder="'请选择'" style="width: 100px">
                  <el-option
                    v-for="_item in item?.data"
                    :key="_item.value"
                    :label="item.props ? _item[item.props.label] : _item.label"
                    :value="item.props ? _item[item.props.value] : _item.value"
                  />
                </el-select>
                <!-- <el-cascader
                  v-model="form[item.model.split('-')[0]]"
                  :show-all-levels="true"
                  :options="item.data"
                  @change="form[item.model.split('-')[1]] = ''"
                /> -->
              </template>
              <template #append>
                <!-- <el-button :icon="Search" /> -->
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </template>
      <el-col :span="8" v-if="colBtn" style="display: flex; justify-content: flex-end">
        <el-button type="primary" :icon="Search" @click="submit">查询</el-button>
        <el-button type="primary" plain :icon="RefreshRight" @click="reset">重置</el-button>
      </el-col>
    </el-row>
  </el-form>
  <div class="btn-wrap" v-if="!colBtn">
    <el-button type="primary" :icon="Search" @click="submit">查询</el-button>
    <el-button type="primary" plain :icon="RefreshRight" @click="reset">重置</el-button>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { Search, RefreshRight } from "@element-plus/icons-vue";
import { getArea } from "@/apis/products/specifications";

const area = ref([]);
const _list = ref([]);
const form = ref({
  demo: 1
});
const formRef = ref();

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  colBtn: {
    //是否把操作按钮放在col标签内，默认false
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(["submit", "reset", "daterangeChange"]);
onMounted(() => {
  //获取省市区
  getArea().then(res => {
    area.value = res.data;
  });
});

//数据字典查询
const getDataDic = key => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([
        { label: "aaaa", value: 1 },
        { label: "bbbbbbb", value: 0 }
      ]);
    }, 2000);
  });
};
watch(
  () => props.list,
  async val => {
    _list.value = JSON.parse(JSON.stringify(props.list));
    for (let item of _list.value) {
      if (item.key) {
        const data = await getDataDic(item.key);
        item.data = data;
      } else if (item.treeType === "productType") {
        // const data = await getDataDic(item.key);
        //异步请求 商品分类数据
        console.log(123123, item.treeType);

        item.data = [
          {
            categoryId: "1780859823072493568",
            image: "http://dummyimage.com/400x400",
            name: "成品",
            parentId: 0,
            parentName: null,
            fomart: "1780859823072493568",
            remark: "这是简单的备注信息",
            productNum: 0,
            status: 0,
            sortOrder: 0,
            createTime: "2024-04-18 15:24:03",
            preview: "成品",
            children: [
              {
                categoryId: "1780860313751535616",
                image: "http://dummyimage.com/400x400",
                name: "客厅家具",
                parentId: "1780859823072493568",
                parentName: "成品",
                fomart: "1780859823072493568-1780860313751535616",
                remark: "这是简单的ss",
                productNum: 0,
                status: 1,
                sortOrder: 4,
                createTime: "2024-04-18 15:26:00",
                preview: "成品-客厅家具",
                children: [
                  {
                    categoryId: "1782608490525163520",
                    image: null,
                    name: "茶几",
                    parentId: "1780860313751535616",
                    parentName: "客厅家具",
                    fomart: "1780859823072493568-1780860313751535616-1782608490525163520",
                    remark: null,
                    productNum: 0,
                    status: 1,
                    sortOrder: 0,
                    createTime: "2024-04-23 11:12:38",
                    preview: "成品-客厅家具-茶几",
                    children: []
                  },
                  {
                    categoryId: "1780860828338110464",
                    image: "http://dummyimage.com/400x400",
                    name: "沙发",
                    parentId: "1780860313751535616",
                    parentName: "客厅家具",
                    fomart: "1780859823072493568-1780860313751535616-1780860828338110464",
                    remark: null,
                    productNum: 0,
                    status: 1,
                    sortOrder: 1,
                    createTime: "2024-04-18 15:28:03",
                    preview: "成品-客厅家具-沙发",
                    children: []
                  },
                  {
                    categoryId: "1780860828338110465",
                    image: "http://dummyimage.com/400x400",
                    name: "椅子",
                    parentId: "1780860313751535616",
                    parentName: "客厅家具",
                    fomart: "1780859823072493568-1780860313751535616-1780860828338110465",
                    remark: null,
                    productNum: 0,
                    status: 1,
                    sortOrder: 2,
                    createTime: "2024-04-18 15:28:03",
                    preview: "成品-客厅家具-椅子",
                    children: []
                  }
                ]
              },
              {
                categoryId: "1782607272084045824",
                image: null,
                name: "卧室家具A",
                parentId: "1780859823072493568",
                parentName: "成品",
                fomart: "1780859823072493568-1782607272084045824",
                remark: null,
                productNum: 0,
                status: 1,
                sortOrder: 4,
                createTime: "2024-04-23 11:07:48",
                preview: "成品-卧室家具A",
                children: [
                  {
                    categoryId: "1782608435705610240",
                    image: null,
                    name: "小夜灯",
                    parentId: "1782607272084045824",
                    parentName: "卧室家具A",
                    fomart: "1780859823072493568-1782607272084045824-1782608435705610240",
                    remark: null,
                    productNum: 0,
                    status: 1,
                    sortOrder: 1,
                    createTime: "2024-04-23 11:12:25",
                    preview: "成品-卧室家具A-小夜灯",
                    children: []
                  },
                  {
                    categoryId: "1782607736800346112",
                    image: null,
                    name: "床头柜11111",
                    parentId: "1782607272084045824",
                    parentName: "卧室家具A",
                    fomart: "1780859823072493568-1782607272084045824-1782607736800346112",
                    remark: null,
                    productNum: 0,
                    status: 1,
                    sortOrder: 2,
                    createTime: "2024-04-23 11:09:38",
                    preview: "成品-卧室家具A-床头柜11111",
                    children: []
                  }
                ]
              }
            ]
          },
          {
            categoryId: "1780859866953302016",
            image: "http://dummyimage.com/400x400",
            name: "灯饰",
            parentId: 0,
            parentName: null,
            fomart: "1780859866953302016",
            remark: "这是简单的备注信息",
            productNum: 0,
            status: 1,
            sortOrder: 1,
            createTime: "2024-04-18 15:24:14",
            preview: "灯饰",
            children: [
              {
                categoryId: "1782608575103303680",
                image: null,
                name: "厨房灯饰",
                parentId: "1780859866953302016",
                parentName: "灯饰",
                fomart: "1780859866953302016-1782608575103303680",
                remark: null,
                productNum: 0,
                status: 1,
                sortOrder: 0,
                createTime: "2024-04-23 11:12:58",
                preview: "灯饰-厨房灯饰",
                children: []
              }
            ]
          },
          {
            categoryId: "1780868886627893248",
            image: "http://dummyimage.com/400x400",
            name: "墙布",
            parentId: 0,
            parentName: null,
            fomart: "1780868886627893248",
            remark: "这是简单的备注信息",
            productNum: 0,
            status: 1,
            sortOrder: 3,
            createTime: "2024-04-18 16:00:04",
            preview: "墙布",
            children: []
          }
        ];
      }
    }
  },
  { deep: true, immediate: true }
);

const submit = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      const formData = JSON.parse(JSON.stringify(form.value));
      emit("submit", formData);
    } else {
      console.log("error submit!", fields);
    }
  });
};

const setFormData = (model, val) => {
  form.value[model] = val;
};

const getFormData = () => {
  return form.value;
};

const reset = () => {
  formRef.value.resetFields();
  for (let item of props.list) {
    if (item.type === "numrange" || item.type === "select-input") {
      form.value[[item.model.split("-")[0]]] = undefined;
      form.value[[item.model.split("-")[1]]] = undefined;
    } else {
      form.value[item.model] = null;
    }
  }
  emit("reset");
};

const daterangeChange = arr => {
  //结束时间统一更改为 23:59:59
  arr[1] = arr[1].split(" ")[0] + " 23:59:59";
  emit("daterangeChange");
};

defineExpose({ setFormData, getFormData });
</script>

<style scoped lang="scss">
:deep(.el-form-item__label) {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 16px;
}

:deep(.el-input-group--prepend .el-input-group__prepend .el-select .el-select__wrapper) {
  box-shadow: none !important;
}

:deep(.el-input__wrapper) {
  background-color: white !important;
}

:deep(.el-select__wrapper) {
  background-color: white !important;
}

:deep(.el-date-editor.el-input__wrapper) {
  box-shadow: 0 0 0 1px white inset !important;
}

:deep(.el-input.is-disabled .el-input__inner) {
  -webkit-text-fill-color: #a8abb2;
}

:deep(.el-input-group__append) {
  padding: 0 !important;
}

:deep(.el-icon.el-input__icon.el-input__validateIcon) {
  display: none;
}

// :deep(.el-input-group__prepend) {
//   padding: 0;
//   box-shadow: none;
// }
// :deep(.el-input.el-input-group.el-input-group--append.el-input-group--prepend) {
//   & > .el-input-group__prepend {
//     border-radius: 4px 0 0 4px;
//     border: 1px solid #dcdfe6;
//     border-right: none;
//     .el-input__wrapper {
//       border-radius: 4px;
//     }
//     .el-cascader.el-tooltip__trigger.el-tooltip__trigger {
//       border-radius: 4px 0 0 4px;
//     }
//   }
//   & > .el-input__wrapper {
//     border: 1px solid #dcdfe6;
//   }
// }
// :deep(.el-input__wrapper) {
//   box-shadow: none;
// }

.numrange {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .el-input-number {
    flex: 1;
  }

  span {
    width: 30px;
    text-align: center;
  }
}

.btn-wrap {
  display: flex;
  justify-content: flex-end;
}

:deep(.is-disabled) {
  .el-select__selected-item {
    color: #a8abb2 !important;
  }

  .el-select__suffix {
    display: none !important;
  }
}
</style>
